import { BusinessSignals } from "@/apis/api_signals"
import Image from "@/components/base/Image"
import { css } from "@emotion/react"
import { computed } from "@preact/signals"
import useCountdown from "ahooks/lib/useCountDown"
import MarginTopBlock from "../base/MarginTopBlock"
import ButtonRegular from "../composite/ButtonRegular/main"
import ButtonText from "../composite/ButtonText"
import { ModalSlideUpStaticMethods } from "../composite/ModalSlideUp/main"
import { eventPreventCss } from "@/styles/variables/css"
import { useNavigate } from "react-router-dom"
import { PATHS } from "@/constants/path"
import kycController from "@/features_signal/kycController"

export default function KycWarningWithCountdown() {
    const expiredAt = BusinessSignals.kycExpiredAt.value
    const [, { days, hours: _hours, minutes, seconds }] = useCountdown({ targetDate: expiredAt })
    const navigate = useNavigate()
    const displayValues = computed(() => {
        const hours = days * 24 + _hours
        return [
            ["Hours", hours],
            ["Minutes", minutes],
            ["Seconds", seconds],
        ]
    })

    const handleOKay = () => {
        ModalSlideUpStaticMethods.close("kyc-warning-with-countdown")
        kycController.navigateToKyc()
    }

    const handleDoItLater = () => {
        ModalSlideUpStaticMethods.close("kyc-warning-with-countdown")
    }

    return (
        <div
            css={css`
                font-family: "Gilroy";
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: center;
                height: 100%;
                background: #fffffff2;
                backdrop-filter: blur(80rem);
                border-radius: 16rem;
                width: 327rem;
                height: 384rem;
                align-self: center;
                padding: 0 24rem;
            `}
        >
            <Image
                css={css`
                    width: 56rem;
                    height: 56rem;
                    align-self: center;
                    ${eventPreventCss.styles}
                `}
                src={"kyc/entry_warn.webp"}
            />
            <MarginTopBlock top={12} />
            <div
                css={css`
                    color: #0f0f10;
                    font-weight: 600;
                    font-size: 18rem;
                    line-height: 28rem;
                    letter-spacing: 0%;
                    text-align: center;
                    text-transform: capitalize;
                    align-self: center;
                    ${eventPreventCss.styles}
                `}
            >
                Your account will be restricted
            </div>
            <MarginTopBlock top={8} />
            <div
                css={css`
                    font-weight: 400;
                    font-size: 14rem;
                    line-height: 20rem;
                    letter-spacing: 0%;
                    text-align: center;
                    color: #424144;
                    align-self: center;
                    ${eventPreventCss.styles}
                `}
            >
                If you do not complete KYC verification, your account will be restricted after
            </div>
            <MarginTopBlock top={12} />
            <div
                css={css`
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    gap: 12rem;
                    align-self: center;
                    ${eventPreventCss.styles}
                `}
            >
                {displayValues.value.map(([label, value], index) => (
                    <div
                        key={index}
                        css={css`
                            width: 72rem;
                            height: 72rem;
                            border-radius: 12rem;
                            background: #ffffff;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                        `}
                    >
                        <div
                            css={css`
                                font-weight: 600;
                                font-size: 28rem;
                                line-height: 48rem;
                                letter-spacing: 0%;
                                text-align: center;
                                vertical-align: middle;
                                text-transform: capitalize;
                                color: #131416;
                            `}
                        >
                            {value}
                        </div>
                        <div
                            css={css`
                                color: #424144;
                                font-weight: 400;
                                font-size: 12rem;
                                line-height: 16rem;
                                letter-spacing: 0%;
                                text-align: center;
                                vertical-align: middle;
                            `}
                        >
                            {label}
                        </div>
                    </div>
                ))}
            </div>
            <MarginTopBlock top={32} />
            <ButtonRegular onClick={handleOKay}>Okay</ButtonRegular>
            <ButtonText onClick={handleDoItLater}>Do it later</ButtonText>
        </div>
    )
}
